<template>
<div>
    <fou-dialog :title="'選擇學生'" :fullscreen="isFullscreen" v-model:dialogValue="dialogValue" :width="'75%'">
        <template #content="">
                <!-- <el-button color="#081F42" :disabled="delsable" @click="choice()">多選{{num}}</el-button> -->
                <ProTable
                :data="tableData"
                :page="page"
                :column="column"
                :rowControl="[]"
                :elProps="elProps"
                :disabled="[]"
                :controlWidth="controlWidth"
                @page-change="onPageChange"
                @pageRefresh="pageRefresh"
                
                >
                <!-- <template #default="{ row, propname }"> -->
                    <!-- <div  v-if="propname === 'school' || propname === 'cate' ">
                          {{row[propname] && row[propname].name ? row[propname].name : row[propname]}}
                    </div> -->
                <!-- </template> -->
                <template #search_operate>
                    <el-table-column  fixed="right" min-width="200px" >
                        <template #header>
                                <el-input @keyup.enter="getSearch" clearable v-model="search" placeholder="搜索(內容)" class="input">
                                    <template #append>
                                    <el-button icon="Search" @click="getSearch"></el-button>
                                    </template>
                                </el-input>
                        </template>
                        <template #default="scope">
                            <el-button  color="#081F42"  @click="handleSelect(scope.$index, scope.row)" >選擇</el-button >
                        </template>
                    </el-table-column>
                </template>
                </ProTable>
        </template>
        <template #footer>
            <el-button @click="dialogValue = false">關閉</el-button>
            <el-button color="#081F42" icon="FullScreen" @click="isFullscreen=!isFullscreen">{{fullscreenText}}</el-button>
        </template>
    </fou-dialog>
</div>
</template>

<script setup>
import { ref,reactive,computed } from 'vue' 
import {content} from '@/http/index.js'
import {controlWidth,elProps} from './notes'
import {loading,closeLoading} from '@/common/function.js'
const page = reactive({current_page: 1,per_page: 10,total: 10,page_size: [10, 20, 30]})
const dialogValue = ref(false)
const column = {
    sort:"次序",
    content:'內容',
}
const name = ref('')
const isFullscreen = ref(false)
const emit = defineEmits(['update'])
const handleSelect = (index,row)=>{
    console.log(index,row);
     emit('update',row,name.value)
     dialogValue.value = false

}
const fullscreenText = computed(()=>{
 return isFullscreen.value ? '退出全屏' : '全屏顯示'
})

const onPageChange = async({ e, type }) => {
  console.log(e, type);
  if (type == "current") {
    obj.page = e;
  }
  if (type == "size") {
    obj.page = 1
    obj.limit = e;
  }
    await TableData()
};
const pageRefresh = async () => {
  obj.page = 1
  await TableData()
};
const obj = reactive({
  page: page.current_page,
  limit: page.per_page,
  name: '',
  type:''
});
const tableData = ref([])
const TableData = async(e)=>{
    obj.type = e
    loading()
    const data = await content(obj)
    console.log(data);
    if (data.code == 200) {
        tableData.value = data.data.data
    }
    closeLoading()
}
const search = ref('')
const getSearch = async()=>{
    obj.name = search.value
    await TableData()
}
defineExpose({
    dialogValue,TableData,name
})
</script>

<style lang='less'  scoped>

</style>